<script setup lang="ts">
import ScrollBtn from '@/components/scroll-btn/index.vue'
import Sidebar from '@/components/side-bar/index.vue'
import ArticleList from '@/components/article-list/index.vue'
import FishSwimming from '@/components/fish-swimming/index.vue'
import Music from '@/components/music/music.vue'
import typeText from '@/components/type-text/index.vue'
import { onMounted, ref } from 'vue'

// 获取 simplebar 容器的引用
const simpleBarRef = ref<HTMLElement | null>(null)

onMounted(() => {})
</script>

<template>
  <!-- 绑定引用 -->
  <simple-bar id="home" class="simple-bar-box">
    <div>
      <div id="main-1" class="main">
        <div class="type"><typeText text="欢迎来到源生纪，这里记录着我的故事..." /></div>
        <!-- 传递滚动函数到 ScrollBtn 组件 -->
        <div class="scroll-btn-box">
          <ScrollBtn :scrollSimpleBar="true" scrollTarget="#home"></ScrollBtn>
        </div>
        <div class="ocean-container">
          <FishSwimming></FishSwimming>
        </div>
      </div>
      <div id="main-2" class="main">
       <div class="main-2-box">
          <div class="sidebar-box">
            <Sidebar></Sidebar>
          </div>
          <div class="article-list-box">
            <ArticleList></ArticleList>
          </div>
      </div>
       </div>
      <div class="music-container">
        <Music />
      </div>
      <footer
        style="
          position: fixed;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: end;
          width: 100%;
          z-index: 999;
          padding: 15px;
          box-sizing: border-box;
        "
      >
        <a style="color: #333" href="https://beian.miit.gov.cn/" target="_blank"
          >粤ICP备2025392410号  	

</a
        > <a style="color: #333; margin-left: 20px;" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">粤公网安备44011502001336号</a>
      </footer>
    </div>
  </simple-bar>
</template>

<style scoped lang="scss">
#home {
  overflow-y: auto;
}
.main {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
#main-1 {
  background-image: url('@/assets/imgs/16_9_bg5.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  .type {
    width: 100%;
    text-align: center;
    margin: 150px auto;
  }
  .ocean-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 300px;
  }
  .scroll-btn-box {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: shakeDown 2s ease-in-out infinite;
    :deep(.scroll-button) {
      background-color: transparent;
      color: #8284ae;
      span {
        font-size: 2rem;
        color: #8284ae;
      }
    }
  }
}
#main-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  background: linear-gradient(to bottom, #f3f2eb, #f5f5f5);
  .main-2-box {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
  }
.sidebar-box {
  width: 25%;
}

.article-list-box {
  flex: 1;
}
}
.music-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;
  z-index: 1000;
}
</style>
